<template>
  <div class="sys-table" v-loading="currentLoading">
    <el-table :data="list"
              ref="table"
              v-bind="$attrs"
              v-on="$listeners"
             >
      <el-table-column v-for="(col, index) in displayColumns"
                       :key="`${col.prop}_${col.type}_${index}`"
                       reserve-selection
                       v-bind="col">
        <template v-if="col.type==='handle' || ( col.prop && $scopedSlots[col.prop])" v-slot="scope">
          <!-- 自定义字段 插槽-->
          <slot :name="col.prop || '_handle'" v-bind="scope" :column="col" ></slot>
        </template>
      </el-table-column>
    </el-table>

   <div class="sys-table-page" v-if="showPage">
     <el-pagination  ref="pager"
                     v-bind="pagerProps"
                     :total="currentTotal"
                     :currentPage="currentPage"
                     class="my-table__pager"
                     @size-change="handlePageSizeChange"
                     @current-change="handlePageChange">

     </el-pagination>
   </div>
  </div>
</template>

<script>
import page from './Pager'

export default {
  name: 'sys-table',
  cnName: 'sys-table',
  mixins: [page],
  props: {
    loading: Boolean,
    // 加载数据函数
    loader: Function,
    // 实例化自动调用加载函数
    auto: {
      type: Boolean,
      default: true
    },
    // 初始页码
    page: {
      type: Number,
      default: 1
    },
    // 初始页大小
    pageSize: {
      type: Number,
      default: 10
    },
    showPage: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      currentLoading: this.loading,
      list: [],
      currentPage: this.page,
      currentTotal: this.total,
      currentPageSize: this.pageSize,
      errorMessage: null,
      toolbarHeight: 0,
      pagerHeight: 0,
      displayColumnProps: [],
      columnsProxy: []
    }
  },
  methods: {
    resetDisplayColumns() {
      this.displayColumnProps = this.columnsProxy.filter(col => {
        if (!col.prop || col.type) return false
        return col.display !== false
      }).map(col => col.prop)
    },

    load() {
      if (!this.loader) return

      this.currentLoading = true
      this.errorMessage = null
      this.loader(this.currentPage, this.currentPageSize).then(res => {
        this.list = res.list || []
        this.currentTotal = res.total || 0
        /**
         * 请求成功时触发
         * @event success
         * @param {object} [res] 请求响应数据
         */
        this.$emit('success', res)
      }).catch(e => {
        this.errorMessage = e;
        /**
         * 请求失败时触发
         * @event error
         * @param {*} e 错误信息
         */
        this.$emit('error', e)
      }).finally(() => {
        this.currentLoading = false
      })
    },
    pagerLoaded() {

    }
  },
  watch: {
    loading: {
      immediate: true,
      handler(val) {
        this.currentLoading = val
      }
    },
    // 初始化数据
    data: {
      immediate: true,
      handler(val) {
        this.list = val || []
      }
    },
    columns: {
      immediate: true,
      handler() {
        this.columnsProxy = [...this.columns]
        this.resetDisplayColumns()
      }
    }
  },
  computed: {
    displayColumns() {
      return this.columnsProxy.filter(col => {
        // 有type的字段 或 没设置属性名称的列固定显示
        if (col.type || !col.prop) return true
        return this.displayColumnProps.includes(col.prop)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sys-table {

  &-page {
    display: inline-block;
    float: right;
    padding: 12px;
  }
}
</style>
